HTML原有的表单及表单控件02

2018-01-22

使用label定义标签

<label.../>元素用于在表单元素中定义标签，可以指定id，style，class等核心属性，也可以指定onclick等事件属性，还可以指定一个for属性，该属性指定该标签与哪个表单控件关联。

当用户单击<label.../>所生产的标签时，浏览器会自动将焦点转移到和标签相关的表单控件元素上

让标签和表单控件关联有两种方式。

隐式使用for属性: 指定<label.../>元素的for属性值为所关联表单的id属性值
显示关联: 将普通文本、表单控件一起放在<label.../>元素内部即可

<form action="#" method="get">
  <label for="username">用户名</label>  //隐式使用for属性
  <input id="username" name="username" type="text" /><br/>
  <label>密码： <input id="password" name="password" type="password" />
  </label><br/>
  <input id="OK" type="submit" value="登录" />
</form>

尽量使用隐式关联，因为IE没有很好的支持显示关联

使用button定义按钮

<button.../>元素用于定义一个按钮，在<button.../>元素的内部可以包含普通文本、文本格式化标签、图像等内容，这也是<button.../>按钮和<input.../>按钮的不同

<button.../>按钮之间不要放置图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

<button.../>元素可以指定id、style、class等核心属性还可以指定onclick等事件响应属性。除此之外，还可以指定如下几个属性：

disabled: 指定是否禁用此按钮，该属性值只能是disabled，或者省略属性值
name: 指定该按钮的唯一名称。该属性值应该与id属性值保持一致
type: 指定该按钮属于那种按钮，该属性只能是button、reset或submit其中之一
value: 指定该按钮的初始值，该值可通过脚本进行修改

<button type="button">
  提交
</button>
<button type="submit">
  <img src="../img/images.jpg" />
</button>

列表框和下拉菜单

<select.../>元素用于创建列表或下拉框，该元素必须和<opation.../>元素结合使用，每个<opation.../>元素代表一个列表项或菜单项。

<select.../>元素可以指定id、style、class等核心属性，该元素仅可以指定onchange事件属性——当该列表或下拉列表内的选中项发生改变时，触发onchange事件。除此之外，还可以指定如下属性：

disable：设置禁用该列表框和下拉菜单，该属性的值只能是disable或省略属性值
multiple：设置该列表框和下拉菜单是否允许多选，该属性只能是multiple，即表示允许多选，一旦设置允许多选，该属性的值就会自动生成列表框
size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，<select.../>元素就会自动生成类表框

在<select.../>元素里，只能包含如下两种子元素

<option>: 用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的文本
<optgroup.../>: 用于定义列表项或菜单项组。该元素只能包含<option.../>子元素，处于<optgroup.../>里的<option.../>就属于该组

<opation.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外，还可以指定如下几个属性：

disable：指定禁用该选项，该属性的值只能是disabled
selected：指定该列表项初始状态是否处于被选中状态。该属性的值只能是selected
value: 指定该选项对应的请求参数值

<optgroup.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外，还可以指定如下两个属性：

label：指定该选项组的标签。这个属性必填
disabled：设置禁用该选项里的所有选项。该属性只能是disabled或省略属性值

下面代码是使用<select.../>元素定义了一个下拉菜单和两个列表框

<select name="skills" id="skills">
     <option value="html5" selected>HTML5</option>
     <option value="css3">CSS3</option>
     <option value="javascript">javascript</option>
</select>
<select name="books" id="books" multiple="multiple" size="3">
     <option value="hyrz" selected>火影忍者</option>
     <option value="hzw">海贼王</option>
     <option value="ss">死神</option>
</select>
<select name="books" id="books" multiple="multiple" size="6">
     <optgroup label="动漫">
     <option value="hyrz" selected>火影忍者</option>
     <option value="hzw">海贼王</option>
     <option value="ss">死神</option>
</optgroup>
	<optgroup label="游戏">
      <option value="hyrz" selected>王者荣耀</option>
      <option value="hzw">穿越火线</option>
      <option value="ss">阴阳师</option>
     </optgroup>
</select>

使用textarea定义文本域

<textarea.../>素用于生成多行文本域，<textarea.../>元素可以指定id、styel、class等核心属性，还可以指定onclick等事件属性。由于textarea的特殊性，它可以接收用户输入，用户可以选中文本域内的文本，所以还可以指定onselect、onchange两个属性，分别用于响应文本被选中、文本被修改事件。除此之外，该元素也可以指定如下几个属性。

cols: 指定文本域的宽度，该属性必须
rows：指定文本域的高度，该属性必填
disabled：指定禁用该文本域。该属性只能是disabled，当此文本域首次加载时禁用此文本域
readonly：指定该文本域只读，该属性值只能是readonly

与单行文本框相同的是，<texarea.../>元素也指定name属性，该属性将作为textarea对应请求参数的参数名；与单行文本框不同的是，<textarea.../>元素不能指定value属性，<textarea>和</textarea>标签之间的内容将作为<textarea.../>对应请求参数的参数值

<textarea cols="20" rows="2"></textarea><br>
<textarea cols="20" rows="2" readonly="readonly">
        火影忍者
        王者荣耀
</textarea>